<template>
  <div>
    <el-row v-if="echartShow">
      <el-col :span="8">
        <EchartPie @pieClickSearch='pieClickSearch'></EchartPie>
      </el-col>
      <el-col :span="16">
        <EchartBar @barClickSearch='barClickSearch'></EchartBar>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="linkShowSearchCondition">
      <el-col :span="6" style="width:340px;">
        <div class='auxiliarySelectText' :style="'width:' + (lang === 'zh'?'70px':'100px')">{{$t('IP类型')}}</div>
        <el-select v-model="record.ip_type" filterable clearable :placeholder="$t('请选择')" ref="ipType" style="margin-bottom:10px;" size='small'>
          <el-option v-for="item in ipTypeList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="width:340px;">
        <div class='auxiliarySelectText' :style="'width:' + (lang === 'zh'?'70px':'100px')">{{$t('协议类型')}}</div>
        <el-select v-model="record.protocol_type" ref="protocolType" filterable clearable :placeholder="$t('请选择')" style="margin-bottom:10px;" size='small'>
          <el-option v-for="item in protocolTypeList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="width:340px;">
        <div class='auxiliarySelectText' :style="'width:' + (lang === 'zh'?'70px':'100px')">{{$t('源IP')}}</div>
        <el-input v-emoji v-model="record.src_ip" ref="srcIp" style="width:217px;margin-bottom:10px;" size='small'></el-input>
      </el-col>
      <el-col :span="6" style="width:340px;">
        <div class='auxiliarySelectText' :style="'width:' + (lang === 'zh'?'70px':'100px')">{{$t('目的IP')}}</div>
        <el-input v-emoji v-model="record.dst_ip" ref="dstIp" style="width:217px;margin-bottom:10px;" size='small'></el-input>
      </el-col>
      <el-col :span="6" style="width:340px;">
        <div class='auxiliarySelectText' :style="'width:' + (lang === 'zh'?'70px':'100px')">{{$t('目的端口')}}</div>
        <el-select v-model="record.dst_port" ref="dstPort" filterable clearable :placeholder="$t('请选择')" style="margin-bottom:10px;" size='small'>
          <el-option v-for="item in dstPortList" filterable clearable :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="width:340px;">
        <div class='auxiliarySelectText' :style="'width:' + (lang === 'zh'?'70px':'100px')">{{$t('服务')}}</div>
        <el-select v-model="record.possible_service" ref='service' filterable clearable :placeholder="$t('请选择')" style="margin-bottom:10px;" size='small'>
          <el-option v-for="item in possibleServiceList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="AuxiliarybuttonBox">
      <el-button type="success" size='small' @click="listData()" class="findnews">{{$t('查询')}}</el-button>
      <el-button type="success" size='small' @click="reListData()" class="setting">{{$t('重置')}}</el-button>
      <el-button type="success" size='small' @click="makeData()" class="ways">{{$t('生成策略')}}</el-button>
      <el-button type="danger" size='small' @click="clearListData" class="clears">{{$t('清空')}}</el-button>
      <el-button type="success" size='small' @click="exportSearchData()" class="exportSearch">{{$t('导出')}}</el-button>
      <el-button type="success" size='small' @click="dialogVisible()" class="dialogVisible">{{$t('存储上限')}}</el-button>
    </div>
    <el-table ref="multipleTable" size='mini' :data="tableList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align='center' width="55"></el-table-column>
      <!-- <el-table-column prop="LAY_TABLE_INDEX" label="ID" align='center' min-width="100"></el-table-column> -->
      <el-table-column prop="protocol_type" align='center' :label="$t('协议类型')" min-width="80"></el-table-column>
      <el-table-column prop="ip_type" align='center' :label="$t('IP类型')" min-width="80"></el-table-column>
      <el-table-column prop="src_ip" align='center' :label="$t('源IP')" min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.src_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_ip" align='center' :label="$t('目的IP')" min-width="100">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.dst_ip" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="dst_port" align='center' :label="$t('目的端口')" min-width="80"></el-table-column>
      <el-table-column prop="count" align='center' :label="$t('会话统计')" min-width="80"></el-table-column>
      <el-table-column prop="possible_service" align='center' :label="$t('服务')" min-width="150">
        <template slot-scope="scope">
          <tooltip :copyText="scope.row.possible_service" class="wid190">
          </tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" align='center' :label="$t('创建时间')" min-width="150"></el-table-column>
      <el-table-column prop="last_use_time" align='center' :label="$t('上次使用时间')" min-width="150"></el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="recordNew.page" :page-size="recordNew.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <save-dialog v-if="saveDialogVisible" ref="refSaveDialogVisible"></save-dialog>

    <el-dialog :title="$t('提示')" v-if="tipDialogVisible" :visible.sync="tipDialogVisible" width="600px" :close="tipClose" v-drag :close-on-click-modal='false'>
      <div style="white-space: pre-wrap;margin-bottom:25px;" v-html="tipMsg"></div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="tipClose">{{$t('取 消')}}</el-button>
      </span> -->
    </el-dialog>

  </div>
</template>

<script>

import { exportSearchInfo, searchInfo, clearAssist, addInfo } from '@/api/safe/access/auxiliary'
import EchartBar from './components/EchartBar'
import EchartPie from './components/EchartPie'
import SaveDialog from './components/SaveDialog.vue'
import { selectClass, inputClass } from '@/utils/input-class.js'
export default {
  name: 'Auxiliary',
  components: {
    EchartPie,
    EchartBar,
    SaveDialog
  },
  data () {
    return {
      tipDialogVisible: false,
      saveDialogVisible: false,
      lang: this.$i18n.locale,
      tipMsg: '',
      echartShow: false,
      record: {
        ip_type: '',
        protocol_type: '',
        src_ip: '',
        dst_ip: '',
        dst_port: '',
        possible_service: '',
        page: 1,
        limit: 20
      },
      recordCopy: {
        ip_type: '',
        protocol_type: '',
        src_ip: '',
        dst_ip: '',
        dst_port: '',
        possible_service: '',
        page: 1,
        limit: 20
      },
      recordNew: {
        ip_type: '',
        protocol_type: '',
        src_ip: '',
        dst_ip: '',
        dst_port: '',
        possible_service: '',
        page: 1,
        limit: 20
      },
      total: 0,
      selectList: [],
      tableList: [],
      ipTypeList: ['IPv4', 'IPv6'],
      protocolTypeList: ['TCP', 'UDP', 'ICMP'],
      dstPortList: [],
      possibleServiceList: []
    }
  },
  created () {
    this.listData()
    this.echartShow = true
  },
  mounted () {
    this.$nextTick(() => {
      const data = ['srcIp', 'dstIp']
      inputClass(this.$refs, data)
      const selectData = ['protocolType', 'ipType', 'dstPort', 'service']
      selectClass(this.$refs, selectData)
    })
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.recordNew.limit = val
      this.recordNew.page = 1
      this.listDataNew()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.recordNew.page = val
      this.listDataNew()
    },
    handleSelectionChange (data) {
      this.selectList = data
    },
    listData () {
      let ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      let ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
      if (this.record.src_ip && this.record.ip_type === 'IPv4' && !ipv4.test(this.record.src_ip)) {
        this.$messages.error(this.$t('源IP不是ipv4格式地址'))
      } else if (this.record.src_ip && this.record.ip_type === 'IPv6' && !ipv6.test(this.record.src_ip)) {
        this.$messages.error(this.$t('源IP不是ipv6格式地址'))
      } else if (this.record.src_ip && !ipv6.test(this.record.src_ip) && !ipv4.test(this.record.src_ip)) {
        this.$messages.error(this.$t('源IP格式错误'))
      } else if (this.record.dst_ip && this.record.ip_type === 'IPv4' && !ipv4.test(this.record.dst_ip)) {
        this.$messages.error(this.$t('目的IP不是ipv4格式地址'))
      } else if (this.record.dst_ip && this.record.ip_type === 'IPv6' && !ipv6.test(this.record.dst_ip)) {
        this.$messages.error(this.$t('目的IP不是ipv6格式地址'))
      } else if (this.record.dst_ip && !ipv4.test(this.record.dst_ip) && !ipv6.test(this.record.dst_ip)) {
        this.$messages.error(this.$t('目的IP格式错误'))
      } else {
        this.recordNew = Object.assign({}, this.record)
        searchInfo(this.record).then(res => {
          if (res.status === 0) {
            this.tableList = res.info.data
            this.total = res.info.count
            this.dstPortList = res.info.port
            this.possibleServiceList = res.info.server
          }
        })
      }
    },
    listDataNew () {
      searchInfo(this.recordNew).then(res => {
        if (res.status === 0) {
          this.tableList = res.info.data
          this.total = res.info.count
        }
      })
    },
    reListData () {
      this.record = Object.assign({}, this.recordCopy)
    },
    makeData () {
      if (this.selectList && this.selectList.length > 0) {
        this.$confirm(this.$t('您是否要根据所选会话生成策略？'), this.$t('提示'), {
          closeOnClickModal: false,
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          confirmButtonClass: 'confirmButton',
          cancelButtonClass: 'confirmCancelButton',
          type: 'warning'
        }).then(() => {
          var formData = JSON.stringify(this.selectList)
          addInfo({ rule_map: formData }).then(res => {
            if (res.status === 0) {
              if (res.info.alert === '0' || res.info.alert === 0) {
                this.$message({
                  message: this.$t(res.msg),
                  type: 'success'
                })
              } else {
                this.tipMsg = res.info.msg
                this.tipDialogVisible = true
              }
            }
          })
        })
      } else {
        this.$messages.error(this.$t('请至少选择一条会话！'))
      }
    },
    tipClose () {
      this.tipDialogVisible = false
      this.tipMsg = ''
    },
    dialogVisible () {
      this.saveDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refSaveDialogVisible.init()
      })
    },
    clearListData () {
      this.$confirm(this.$t('确认要清空吗？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        clearAssist().then(res => {
          if (res.status === 0) {
            this.$message({
              message: this.$t('清空成功'),
              type: 'success'
            })
            this.listData()
          }
        })
      })
    },
    exportSearchData () {
      exportSearchInfo(this.record).then(res => {
        if (res[0]) {
          let blob = new Blob([res[0]], { type: 'text/csv,charset=UTF-8' })
          let objectUrl = URL.createObjectURL(blob)
          let link = document.createElement('a')
          link.download = res[1] // 文件名字
          link.href = objectUrl
          // 触发下载
          link.click()
          // window.location.href = objectUrl
        }
      })
    },
    barClickSearch (data) {
      this.recordNew = Object.assign({}, this.recordCopy)
      this.recordNew.src_ip = data
      searchInfo(this.recordNew).then(res => {
        if (res.status === 0) {
          this.tableList = res.info.data
          this.total = res.info.count
        }
      })
    },
    pieClickSearch (data) {
      this.recordNew = Object.assign({}, this.recordCopy)
      this.recordNew.dst_port = data
      searchInfo(this.recordNew).then(res => {
        if (res.status === 0) {
          this.tableList = res.info.data
          this.total = res.info.count
        }
      })
    }
  }
}
</script>
<style lang='scss'>
.auxiliarySelectText {
  display: inline-block;
}
</style>
